<template>
  <div>
    <el-card>
      <el-form ref="form" :model="formData" size="medium" label-width="110px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="监督机构" prop="orgName">
              <el-select
                v-model="formData.orgId"
                multiple
                collapse-tags
                style="margin-left: 20px;"
                placeholder="请选择">
<!--              <el-input v-model="formData.orgName" clearable :style="{width: '90%'}"></el-input>-->
<!--              <el-select v-model="formData.orgId" filterable placeholder="请选择">-->
                <el-option :key="orgid" label="全部" :value="orgid">
                </el-option>
                <el-option
                  v-for="item in forname"
                  :key="item.id"
                  :label="item.orgName"
                  :value="item.id">
                </el-option>
              </el-select>

            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="年份" prop="yearly">
<!--              <el-input v-model="formData.yearly" clearable :style="{width: '50%'}"></el-input>-->
<!--              <el-date-picker v-model="formData.yearly" format="yyyy" value-format="yyyy"-->
<!--                              :style="{width: '50%'}" clearable ></el-date-picker>-->
              <el-date-picker v-model="formData.yearly" type="year" placeholder="选择年" format="yyyy" value-format="yyyy"
                :style="{width: '50%'}" clearable></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4" >
            <el-button style="margin-left: 150px" type="success" size="small" @click="inquire">检索</el-button>
          </el-col>
          <el-col :span="4">
            <download-excel
              class="export-excel-wrapper"
              :data="moneylist"
              :fields="fields"
              :header="title"
              name="财政拨款.xls">
              <el-button style="margin-right: 30px" type="warning" size="small" icon="el-icon-download" >导出</el-button>
            </download-excel>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="box-card">
      <el-table :data="moneylist"
                border style="width: 100%">
        <el-table-column
          fixed
          prop="orgName"
          label="单位"
          width="300">
        </el-table-column>
        <el-table-column
          prop="preFund"
          label="人员经费(万元)"
          width="250">
        </el-table-column>
        <el-table-column
          prop="dutyFund"
          label="公务费(万元)"
          width="272">
        </el-table-column>
        <el-table-column
          prop="businessFund"
          label="业务经费(万元)"
          width="280">
        </el-table-column>
        <el-table-column
          prop="buildFund"
          label="基础建设资金(万元)"
          width="300">
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center" class="page-row" v-show="page_show">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pagesize"
          layout="total, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-row>
    </el-card>
  </div>
</template>

<script>

  import {post} from "@/utils/api";

  export default {
    data() {
      return {
        currentPage:1,
        total:0  ,//一共有多少条数据
        pagesize:6, //每页显示多少条数据  页数等于  total/pagesize
        moneylist:[],
        page_show:true,
        formData:{},
        forname:[],
        orgid:0,
        title:"财政拨款情况表",
        fields:{'单位':'orgName','人员经费(万元)':'preFund','公务费(万元)':'dutyFund','业务经费(万元)':'businessFund','基础建设资金(万元)':'buildFund'}
      }
    },
    async created() {
      let res = await post("org/getallorg")
      // console.log(res)
      this.forname= res
      // console.log(this.forname)
      this.getListByPage(1)

    },
    methods: {
      async inquire(){
        console.log(this.formData)
        let res = await post("money/getbyyearlyandorgid",{...this.formData})
        // console.log(res);
        this.moneylist = res
        this.page_show = false
        // console.log(this.moneylist)
        // this.total = res.total
        // console.log(res.total)
        this.formData = {}
      },
      async getListByPage(page){
        let res = await post("money/getbypage",{page: page, count: this.pagesize})
        console.log(res)
        //处理信息
        this.page_show = true
        this.moneylist = res.records
        console.log(this.moneylist)
        this.total = res.total
        console.log(res.total)

      },
      handleCurrentChange(currentPage){
        //当前页码改变时触发
        // console.log(currentPage)
        this.currentPage = currentPage
        this.getListByPage(currentPage)
      },
    }
  }
</script>
<style></style>
